<template>
	<view class="container">
		<uni-nav-bar leftIcon="back" @clickLeft="back" status-bar="true" title="国家普惠社区">

		</uni-nav-bar>
		<view class="logo">
			<view>
				<image style="width: 132rpx;height: 132rpx;" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-07/11d8220200709195639894.png"
				 mode=""></image>
			</view>
		</view>
		<view class="vedio">
			<video id="myVideo" v-if="poster" :src="vedioSrc" object-fit="cover" :poster="poster" :page-gesture="true"></video>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<button :disabled="!select" :class="[1==1 ? 'btn' : '',select ? '' : 'disable_se']" type="default" open-type="getUserInfo"
		 lang="zh_CN" @getuserinfo="onGotUserInfo">微信授权登录</button>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<button v-if="isVivo" :class="[1==1 ? 'btn' : '',select ? '' : 'disable_se']" type="default" @tap="onGotUserInfo">微信授权登录</button>
		<button v-else :disabled="!select" :class="[1==1 ? 'btn' : '',select ? '' : 'disable_se']" type="default" @tap="onGotUserInfo">微信授权登录</button>
		<!-- #endif -->
		<view class="iosbtn" v-if="IOS" @tap="loginIOS">
			<image src="../../static/images/public/ios.png" mode="widthFix"></image>
			<text>通过Apple登录</text>
		</view>
		<!-- #ifdef H5 -->
		<button v-if="alipay" :disabled="!select" :class="[1==1 ? 'alipay-btn' : '',select ? '' : 'disable_se']" type="default" @tap="alipayLogin">支付宝授权</button>
		<button v-else :disabled="!select" :class="[1==1 ? 'btn' : '',select ? '' : 'disable_se']" type="default" @tap="onGotUserInfo">微信授权</button>
		<!-- #endif -->
		<view class="bottom">
			<view class="authorization">
				<label class="radio" @tap="changeSelect">
					<radio :color="pageColor" value="r1" :checked="select" /></label>
				<text>授权代表您已同意</text>
			</view>
			<text :class="alipay?'alipay-label':''" @tap="goRule(7,'国家普惠社区用户协议')">《国家普惠社区用户协议》、</text>
			<text :class="alipay?'alipay-label':''" @tap="goRule(10,'隐私协议')">《隐私协议》</text>
		</view>
	</view>
</template>

<script>
	import {
		wechatAuth,
		systemConfig,
		wechatApp_auth,
		appleLogin,
		login
	} from "@/api/public.js"
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import wechat from '@/common/wechat.js'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				IOS: false,
				alipay: false,
				pageColor: "#4CC683",
				select: true,
				isVivo: false,
				vedioSrc: '',
				poster: ''
			}
		},
		onLoad() {
			try {
				const res = uni.getSystemInfoSync();
				if (res.brand == 'vivo' || res.brand == 'Vivo' || res.brand == 'VIVO') {
					this.select = false
					this.isVivo = true
				}
			} catch (e) {
				// error
			}
			systemConfig({
				filed: 'routine_upload_video'
			}).then(res => {
				this.vedioSrc = res.msg
			})
			systemConfig({
				filed: 'routine_index_video_image'
			}).then(res => {
				this.poster = res.msg
			})
			//#ifdef H5
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/Alipay/i) == "alipay") {
				this.alipay = true
				this.pageColor = "#1777FF"
			}
			//#endif
			switch (uni.getSystemInfoSync().platform) {

				case 'android':

					console.log('运行Android上')

					break;

				case 'ios':
					// #ifdef APP-PLUS
					this.IOS = true
					//#endif
					console.log('运行iOS上')

					break;

				default:

					console.log('运行在开发者工具上')

					break;

			}
		},
		methods: {
			/* 用户登录授权 */
			onGotUserInfo() {
				if (!this.select) {
					return uni.showModal({
						content: "请阅读并同意《国家普惠社区用户协议》《隐私协议》",
						showCancel: false
					})
				}
				let _this = this
				uni.showLoading({
					mask:true,
					title: "登录中..."
				})
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								wechatAuth({
									code: loginRes.code,
									cache_key: loginRes.code,
									spread_spid: uni.getStorageSync("pid"),
									pos: uni.getStorageSync("pos"),
									spread_code: "",
									iv: infoRes.iv,
									encryptedData: infoRes.encryptedData,
								}).then(res => {
									wechat.loginDeal(res, "routine")
								})
							}
						});
					}
				});
				// #endif
				// #ifdef APP-PLUS
				uni.setStorageSync("clientid", plus.push.getClientInfo())
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						wechatApp_auth({
							openid: loginRes.authResult.openid,
							access_token: loginRes.authResult.access_token,
							spread: uni.getStorageSync("pid"),
							pos: uni.getStorageSync("pos"),
							client_id:uni.getStorageSync("clientid").clientid
						}).then(res => {
							
							wechat.loginDeal(res, "weixin_app");
						})
					},
					fail: (err) => {
						this.$api.msg('登录失败')
					}
				})
				// login({
				// 	account:"15213543922",
				// 	password:"123456"
				// }).then(res => {
				// 	uni.setStorageSync('Authori-zation', res.data.token)
				// 	uni.navigateTo({
				// 		url:"/pages/index/index"
				// 	})
				// })
				// #endif                    
				// #ifdef H5
				// login({
				// 	account:"13683490026",
				// 	password:"123456"
				// }).then(res => {
				// 	console.log(1)
				// 	uni.setStorageSync('Authori-zation', res.data.token)
				// 	uni.navigateTo({
				// 		url:"/pages/index/index"
				// 	})
				// })
				wechat.wxLogin()				
				// #endif
			},
			// apple登录
			loginIOS() {
				let _this = this
				uni.showLoading({
					mask:true,
					title: "登录中..."
				})
				uni.login({
					provider: 'apple',
					success: function(loginRes) {
						uni.getUserInfo({
							provider: 'apple',
							success: function(infoRes) {
								appleLogin({
									identityToken: infoRes.userInfo.identityToken,
									spread: uni.getStorageSync("pid"),
									pos: uni.getStorageSync("pos")
								}).then(res => {
									wechat.loginDeal(res, "apple_app")
								})
							}
						});
					},
					fail: function(err) {
						uni.showToast({
							icon: 'none',
							title: err,
							duration: 2000
						});
					}
				});
			},
			//支付宝登陆
			alipayLogin() {
				wechat.alipayLogin()
			},
			goRule(id, name) {
				uni.navigateTo({
					url: `/pages/center/help/rulesDetail?id=${id}&tit=${name}`
				})
			},
			changeSelect() {
				this.select = !this.select
			},
			back() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.logo {
			padding-top: 90rpx;

			view {
				margin: 0 auto;
				width: 132rpx;
				height: 132rpx;
				padding: 16rpx;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 30rpx;

				image {
					border-radius: 32rpx;
				}
			}
		}

		.vedio {
			margin: 80rpx 55rpx;
			width: 640rpx;
			height: 360rpx;
			background: rgba(238, 238, 238, 1);
			border-radius: 10rpx;
			overflow: hidden;

			video {
				width: 100%;
				height: 100%;
			}
		}

		.btn {
			margin-left: 75rpx;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			background: $theme-color;
			border-radius: 40rpx;
		}
		.alipay-btn{
			margin-left: 75rpx;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			background: #1777FF;
			border-radius: 40rpx;
		}

		.iosbtn {
			margin-top: 60rpx;
			margin-left: 75rpx;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #000;
			background: #fff;
			border: 1rpx solid #000;
			box-sizing: border-box;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 32rpx;
				margin-right: 24rpx;
			}

			text {
				font-size: 40rpx;
			}
		}

		.disable_se {
			background: #eeeeee;

		}

		.bottom {
			margin-top: 100rpx;
			width: 100%;
			font-size: 24rpx;
			color: $theme-color;
			text-align: center;

			.authorization {
				position: relative;
				left: -13rpx;
				color: #666;
				margin-bottom: 10rpx;

				.radio {
					radio {
						transform: scale(0.6);
					}
				}
			}

			text {
				font-size: 20rpx;
			}
			.alipay-label{
				color: #1777FF;
			}
		}
	}
</style>
